@page "/"
@inject IJSRuntime JSRuntime

<h1>Synchronous dynamic JS</h1>

<button @onclick="RunAdvanced">Run advanced usage</button>
<br />
<span id="@_textId" style="background-color: orange">Will be replaced.</span>
<br />

<br />
<UsageCommon DynamicJSProvider="_dynamicJSProvider" />

@code {
    private readonly string _textId = "some-text";

    private InProcessDynamicJSProvider _dynamicJSProvider;

    protected override void OnInitialized()
    {
        _dynamicJSProvider = new InProcessDynamicJSProvider((IJSInProcessRuntime)JSRuntime);
    }

    private void RunAdvanced()
    {
        var jsInProcessRuntime = (IJSInProcessRuntime)JSRuntime;

        using (var window = jsInProcessRuntime.GetInProcessDynamicWindow())
        {
            window.console.log("Hello, world!");

            var document = window.document;
            var element = document.getElementById(_textId);
            element.style = "background-color: green;";

            if (element.innerText == "Will be replaced.")
            {
                element.innerText = "New text!";
            }
            else
            {
                window.console.log("Nothing to change");
            }

            var jsObject = JSObject.Create(window, new
            {
                field = "this is a field",
                nested = new
                {
                    otherField = 3
                }
            });

            window.console.log(jsObject);
        }

        using (var window = jsInProcessRuntime.GetInProcessDynamicWindow())
        {
            var jsTrue = JSObject.Create(window, true);

            if (jsTrue)
            {
                window.console.log("It's true!");
            }
        }
    }
}
